<template>
	<view class="bg">
		<view class="result_box">
			<view v-if="uiType == 5">
				<image src="../static/success-3.png" style="width: 192rpx;height: 192rpx;"></image>
			</view>
			<view v-else>
				<image :src="pageTheme === 'orange' ? '../static/success-2.png' : '../static/success.png'"
					style="width: 192rpx;height: 192rpx;"></image>
			</view>
			<view>提交成功</view>
			<view>客服人员在24小时内致电与您联系</view>
			<view v-if="uiType == 5" class="success_button3" @click="onBack">
				我知道啦
			</view>
			<view v-else @click="onBack" :class="pageTheme === 'orange' ? 'success_button1':'success_button2'">我知道啦
			</view>
		</view>
		<view style="padding: 0 24rpx;" v-if="userInfo">
			<view class="user_info_box">
				<view>真实姓名：</view>
				<view class="text_style">{{userInfo.name}}</view>
			</view>
			<view class="user_info_box">
				<view>手机号码：</view>
				<view class="text_style">{{userInfo.phone}}</view>
			</view>
			<view class="user_info_box" v-if="uiType === 5">
				<view>所在地区：</view>
				<view class="text_style">{{userInfo.provincialCityDistrict}}</view>
			</view>
			<view class="user_info_box">
				<view>车辆品牌：</view>
				<view class="text_style">{{userInfo.carDiy}}</view>
			</view>
			<view class="user_info_box" v-if="uiType === 4">
				<view>车辆车牌：</view>
				<view class="text_style">{{userInfo.carNumber}}</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				pageTheme: 'blue',
				uiType: null,
				channelId: null,
				userInfo: null,
			}
		},
		onLoad(options) {
			this.channelId = options.id || 100023;
			uni.getStorage({
				key: 'userObj',
				success: ({
					data
				}) => {
					this.userInfo = JSON.parse(data);
					console.log(this.userInfo, 'this.userInfo')
				}
			});
			this.getChannel();
		},
		methods: {
			getChannel() {
				this.$request({
					url: 'ChannelController/appGetUiType',
					method: 'get',
					data: {
						channelId: this.channelId
					}
				}).then(res => {
					if (res.code == 200) {
						console.log(res.data, 'res.data-------》')
						if (uni.getSystemInfoSync().uniPlatform === 'mp-toutiao') {
							return this.uiType = 5
						}
						//<el-option label="融悦车抵" :value="1" />
						//   <el-option label="易顺车抵" :value="3" />
						//   <el-option label="杭停定制" :value="2" />
						//  <el-option label="信也定制" :value="4" /> 
						//  <el-option label="车辆线索" :value="5" /> 
						switch (res.data) { // 根据请求切换主题
							case 1:
							case 3:
							case 4:
								this.pageTheme = 'blue'
								break;
							case 2:
								this.pageTheme = 'orange'
								break;
						};
						console.log(this.pageTheme, 'pageTheme')
						this.uiType = res.data;
					}
				})
			},
			onBack() {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>
<style>
	page {
		background-color: #fff;
	}
</style>
<style lang="scss">
	.result_box {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 72rpx 0 88rpx 0;

		view:nth-child(2) {
			margin: 24rpx 0;
			font-size: 36rpx;
			font-weight: 500;
			color: #292929;
		}

		view:nth-child(3) {
			font-size: 28rpx;
			font-weight: 400;
			color: #999999;
			margin-bottom: 48rpx;
		}

		.success_button3,
		.success_button2,
		.success_button1 {
			text-align: center;
			width: 494rpx;
			line-height: 92rpx;
			background: #FF9147;
			border-radius: 46rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #FFFFFF;
		}

		.success_button2 {
			background-color: #297EFF;
		}

		.success_button3 {
			background: linear-gradient(180deg, #FF5C71 0%, #FF2945 100%);
		}

	}

	.user_info_box {
		display: flex;
		justify-content: space-between;
		font-size: 32rpx;
		font-weight: 400;
		padding: 24rpx 0;

		.text_style {
			color: #292929;
		}
	}
	@media only screen and (min-width: 750px){
		 .bg{
			 width: 1000px;
			 margin: auto;
			 // .top-bg{
				//  width: 100%;
				//  height: 95vh;
			 // }
			 // .bottom_box{
				//  .image1{
				// 	 object-fit: cover;
				// 	 height: 398px;
				//  }
			 // }
		 }
	}
</style>